<template>
<div class="container" v-loading="loading">
		<div class="statusbar clearfix">
			<div class="w25 back" @click="$router.back(-1)">
				<img src="../../assets/icon/back@2x.png" alt="">
				<span>返回</span>
			</div>
			<div class="w50 topcenter">
				<span>{{titles}}</span>
			</div>
		</div>
		<div class="swiper" style="margin-top: 3.3rem;position: relative;">
			<span  style="position: absolute; left: 2.5rem;color: #fff;font-size: 1.6rem;top: 50%;transform:translateY(-50%); opacity: 0.8;">{{titles}}</span>
			<img src="../../assets/vv_02.png" alt="">
		</div>
		<div class="search clearfix">
			<div class="sear_input">
				<el-input size="small" clearable placeholder="请输入需要搜索的内容" prefix-icon="el-icon-search" v-model="searchs">
				</el-input>
			</div>
			<div class="btn">
				<button @click="fnSearch">搜索</button>
			</div>

		</div>	
			<div class="Indexhomes" style="margin-top: 20px;">
				<mt-loadmore  :bottomPullText='bottomPullText'  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
					<ul>
						<li class="clearfix" v-for='item in Articles' :key='item.id'>
						<a :href="item.friendlyUrl" v-if='item.friendlyUrl'>
							<img :src="item.cover?item.cover:''" alt="">
							<div>
								<p class="text">{{item.title}}</p>
								<p class="time">{{item.creationTime | datas}}</p>
							</div>
						</a>
						<router-link v-bind="{to:'/Details/'+(item.id)}"  v-else>
							<img :src="item.cover?item.cover:''" alt="">
							<div>
								<p class="text">{{item.title}}</p>
								<p class="time">{{item.creationTime | datas}}</p>
							</div>
						</router-link>
					</li>
			
					</ul>
					</mt-loadmore>
			<div class="page-footer" v-if="tip">到底了</div>
			<p class="page-footer" style="padding-top: 15px;" v-if="datalist">暂无数据</p>
		</div>
</div>
</template>

<script>
	import Api from "../../kites/api";
	export default{
		name:'guideList',
		data(){
			return{
				tip:false,
				datalist:false,
				id:'',
				Articles:[],
				titles:'',
				loading:false,
				searchs:'',
				totalCount:0,
				pages: 10,
				pageindex: 1,
				allLoaded:false,
				bottomPullText:'加载更多'
			}
		},
		beforeCreate() {
			this.openIds()
		},
		mounted() {
			this.id = this.$route.params.id
			this.titles = this.$route.query.type
			this.GetMenuArticles()
			console.log(this.id,this.titles)
		},
		methods:{
			//返回
			fnBack(){
				
			},
			//搜索
			fnSearch(){
				this.tip = false
				this.pages = 10
				this.pageindex = 1
//				this.totalCount = 0
				this.loading = true
				this.$post(Api.GetMenuArticles,{
				  "filter": this.searchs,
				  "menuId": this.id,
				  "sorting": "",
				  "maxResultCount": this.pages,
				  "skipCount": this.pages * (this.pageindex - 1),
				}).then(res=>{
					console.log(res)
					if(res.status == 200) {
						this.loading = false
						this.totalCount = res.data.result.totalCount
						this.Articles = res.data.result.items
						console.log(this.totalCount)
						if(this.totalCount==0){
							this.datalist=true
							this.allLoaded = true;
						}else{
							this.datalist=false
							this.allLoaded = false;
						}
						
					} else {
						this.loading = false
						this.$message.error(res.data.error);
					}
				})
			},
			GetMenuArticles(){
				this.loading=true
				this.$post(Api.GetMenuArticles,{
				  "filter": "",
				  "menuId": this.id,
				  "sorting": "",
				  "maxResultCount": this.pages,
				  "skipCount": this.pages * (this.pageindex - 1),
				}).then(res=>{
					console.log(res)
					if(res.status == 200) {
						this.loading = false
						this.totalCount = res.data.result.totalCount
						this.Articles = res.data.result.items
						console.log(this.totalCount)
						var bheight = $('body').height()
					  	var inHeigt = $('.swiper').outerHeight(true)
					  	var snHeigt = $('.search').outerHeight(true)
					  	$('.Indexhomes').css('height',(bheight-inHeigt-snHeigt-18)+'px')
						if(this.totalCount==0){
							this.datalist=true
							this.allLoaded = true;
						}else{
							this.datalist=false
							
						}
						
					} else {
						this.loading = false
						this.$message.error(res.data.error);
					}
				})
			},
			loadBottom(){
				this.loading = true
			    this.pageindex++
				this.$post(Api.GetMenuArticles,{
				  "filter": "",
				  "menuId": this.id,
				  "sorting": "",
				  "maxResultCount": this.pages,
				  "skipCount": this.pages * (this.pageindex - 1),
				}).then(res=>{
					if(res.data.success == true) {
						this.loading = false
						this.totalCount = res.data.result.totalCount
						this.Articles = this.Articles.concat(res.data.result.items)
						if(this.totalCount == this.Articles.length){
							this.tip=true
							this.allLoaded = true;
						}
						this.$refs.loadmore.onBottomLoaded(); //finish refreshing state
					} else {
						this.loading = false;
				        this.allLoaded = true;// 若数据已全部获取完毕
				  	    this.$refs.loadmore.onBottomLoaded();
				        this.$message.error(res.data.error);
					}
				})
			},
		}
	}
</script>

<style scoped="">
	
	.tip {
		line-height: 30px;
		background: #f1f1f1;
		text-align: center;
		margin-top: 15px;
	}
	.page-footer{
		padding-bottom: 15px;
	}
</style>